<template>
  <div class="register">
    <el-container>
      <el-header>
        <div class="title">
          <span>欢迎注册 xmall</span>
        </div>
      </el-header>
      <el-divider></el-divider>
      <el-main>
        <el-steps :active="active" finish-status="success">
          <el-step title="验证邮箱"></el-step>
          <el-step title="填写账户信息"></el-step>
          <el-step title="注册成功"></el-step>
        </el-steps>
        <div class="form-data" v-if="active == 0">
          <el-form label-position="left" :model="form" :rules="rules" ref="form" label-width="80px">
            <el-form-item label="邮箱号码" prop="email">
              <el-input
                v-model="form.email"
                style="width: 64%; float:left;"
              autofocus></el-input>
              <el-button
                class="validate"
                style="width: 36%;float:left; "
                @click="getCode();timer()"
                >{{ text }}</el-button
              >
            </el-form-item>
            <el-form-item label="验证码" prop="code">
              <el-input
                v-model="form.code"
                style="width: 50%;"
                maxlength=6
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="form-data" v-if="active == 1">
          <el-form label-position="left" ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="form.password" show-password></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="repassword">
              <el-input v-model="form.repassword" show-password></el-input>
            </el-form-item>
            <!-- <el-form-item>
                        <el-button type="primary" class="register">注册</el-button>
                    </el-form-item> -->
          </el-form>
        </div>
        <div class="form-data" v-if="active == 2">
          <el-button
            class="success-icon"
            type="success"
            icon="el-icon-check"
            circle
          ></el-button>
          <div class="success-tip">恭喜您，注册成功</div>
          <div class="redirect-tip">
            <span>{{ count }}</span> 秒后即将跳转到首页
            <a href="/">手动跳转</a>
          </div>
        </div>
        <div style="margin-top: 12px;">
          <el-button
            v-show="active != 0 && active != 2"
            style="margin-right: 12px;"
            @click="previous"
            >上一步</el-button
          >
          <el-button v-show="active != 2" type="primary" @click="next"
            >下一步</el-button
          >
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    return {
      // 步骤条
      active: 0,
      form: {
        username: "",
        password: "",
        repassword: "",
        email:"",
        code: "",
      },
      // 倒数3秒计数
      count: 3,
      time: 1,
      text: "发送验证码",
      times: 59,
      clock: null,
      // 是否验证验证码成功
      verify: false,
      // 是否注册成功，
      success: false,
      rules:{
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ],
        repassword: [
          { required: true, message: '请填写确认密码', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请填写邮箱', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '验证码不能为空', trigger: 'blur' }
        ],
      },
    };
  },
  created(){
    console.log(this.rules.repassword[0].message)
  },
  methods: {
    // 步骤条 按钮
    previous() {
      if (this.active-- < 0) this.active = 0;
    },
    next() {
      console.log(this.active)
      if (this.active++ > 2) this.active = 0;
      if(this.active == 1) {
        // 邮箱和验证码不能为空
        if(this.form.email == "" || this.form.code == "") {
          this.active--;
          return;
        }
        this.verifyCode();
        console.log("验证码正确")
      }else if (this.active == 2) {
        // 用户名、密码、确认密码不能为空
        if(this.form.username == "" || this.form.password == "" || this.form.repassword == "") {
          this.active--;
          return;
        }
        this.clock = null;
        console.log("发送注册请求")
        this.register();
      }
    },
    getCount(){
      if (!this.clock) {
        this.clock = setInterval(() => {
          if (this.count > 0) {
            this.count--;
          } else {
            clearInterval(this.clock);
            this.clock = null;
            if(this.success) {
              window.location.href = "/";
            }
            this.count = 3;
          }
        }, 1000);
      }
    },
    register() {
      if(this.verify) {
          if (this.form.password == this.form.repassword) {
          let userName = this.form.username;
          let userPassword = this.form.password;
          let userEmail = this.form.email;
          this.axios
            .post("/api/register", {
              username: userName,
              password: userPassword,
              email:userEmail
            })
            .then(res => {
              if (res.data.code === 200) {
                // this.$message.success("注册成功");
                this.getCount();
              } else {
                this.active--;
                this.$message.error("注册失败");
              }
            })
            .catch(error => {
              console.log(error);
            });
        } else {
          console.log("123");
        }
      }
    },
    getCode() {
      this.axios.get("http://localhost:8080/sendEmail", {
        params:{
          to: this.form.email
        }
      }).then(res => {
          console.log(res);
          if(res.data.code != 200) {
              this.Fail("出错了T-T");
              this.clock = null;
              this.text = "发送验证码";
              this.times = 50;
          }
      }).catch(err => {
        console.log(err)
      })
    },
    timer() {
      if (!this.clock) {
        this.clock = setInterval(() => {
          if (this.times > 0) {
            this.text = this.times + " s";
            this.times--;
          } else {
            clearInterval(this.clock);
            this.clock = null;
            this.text = "发送验证码";
            this.times = 59;
          }
        }, 1000);
      } else {
        this.warn();
      }
    },
    warn() {
      this.$message({
        showClose: true,
        message: "请不要重复点击哦~",
        type: "warning"
      });
    },
    verifyCode() {
      if(!this.verify) {
        this.axios.get("http://localhost:8080/verifyEmailCode", {
          params:{
            code: this.form.code
          }
        }).then(res => {
          if(res.data.code == 200) {
            this.verify = true
          }else {
            this.verify = false
            this.form.code = "";
            this.rules.code[0].message = "验证码不正确";
            this.active--;
          }
        });
      }
    },
    
    Fail(index) {
      this.$message.error(index);
    },
    Success(index) {
      this.$message.success(index);
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.register {
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 20;
  background-color: #fff;
}
.el-container {
  padding: 0 20%;
}
.title {
  width: 100%;
  margin-top: 20px;
  color: #0d1a2e;
  font-size: 28px;
  text-align: center;
  line-height: 60px;
}
.el-steps {
  margin-bottom: 40px;
}
.el-step__title.is-process {
  font-weight: 400;
  color: #666;
}
.form-data {
  width: 60%;
  height: 260px;
  margin: 0 auto;
}
.validate {
  width: 100%;
  /* height: 30px; */
  /* border-radius: 10%; */
  background-color: #fafafa;
}
.register {
  width: 100%;
  margin: 0 auto;
}
.success-icon {
  width: 80px;
  height: 80px;
  font-size: 40px;
  display: block;
  margin: 0 auto;
}
.success-tip {
  margin-top: 20px;
  color: #67c23a;
  font-size: 18px;
  text-align: center;
}
.redirect-tip {
  margin-top: 40px;
  /* position: relative;
    left: 154px; */
  text-align: center;
}
.redirect-tip {
  font-size: 14px;
}
.redirect-tip span {
  color: red;
}
.redirect-tip a {
  margin-left: 12px;
  color: #409eff;
}
</style>